<template>
	<!-- 材料清单 -->
	<view class="flex-col page">
		<view class="flex-col list" v-if="inspection !=''">
			<view class="flex-col items-start list-item" :key="i" v-for="(item, i) in inspection">
				<view v-for="(demo,j) in item.materialPictures.split(',')" :key="j" class="imgtxet">
					<image :src="demo" class="image_1" @click="previewImg()" />
				</view>
				<text class="text_1">{{item.materialName}}</text>
			</view>
		</view>
		<view v-else>
			<u-empty style="height: 95vh;" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list_iQZymVQQ: [null, null, null],
				order_id: '',
				inspection: {},
				materialPictures: [],
			};
		},
		onLoad(options) {
			this.order_id = options.ordersId;
		},
		onShow() {
			this.getList()
		},
		methods: {
			//预览轮播图
			previewImg(current) {
				const urls = this.materialPictures.map(item => {
					console.log(item);
					return item
				})
				uni.previewImage({
					current,
					urls,
				})
			},
			Back() {
				let pageNum = 2
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - pageNum];
				uni.navigateBack({
					success: function() {
						// console.log(beforePage)
						beforePage.$vm.$refs.projectEx.getJD();
					}

				})
			},
			getList() {
				this.$http('harryroom.queryInspectionOrders', {
					ordersId: this.order_id
				}).then(r => {
					console.log(r)
					if (r.code == 200) {
						this.inspection = r.data.inspection.inspectionMaterialList;
						this.materialPictures = r.data.inspection.inspectionMaterialList[0].materialPictures.split(
							',');
					} else {
						uni.showToast({
							title: r.msg,
							icon: "error"
						})
					}
				});
			}


		},
	};
</script>

<style scoped lang="css">
	.back-w {
		display: flex;
		flex-direction: row;
		padding-top: 50rpx;
		/* align-items: center; */
		width: 100vw;
		height: 90rpx;
		background-color: #ffffff;
	}

	.f-w-l {
		display: flex;
		flex-direction: row;
		font-weight: bold;
		margin-left: 33%;
	}

	.list-item {
		padding: 32rpx 24rpx 42rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.image_1 {
		border-radius: 16rpx;
		width: 654rpx;
		height: 328rpx;
	}

	.text_1 {
		margin-top: 21rpx;
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.page {
		padding-bottom: 37rpx;
		background-color: #f6f7f9ff;
		width: 100%;
		height: 100vh;
	}

	.section_1 {
		padding: 53rpx 31.5rpx 31rpx;
		background-color: #ffffff;
		border-bottom: solid 1rpx #eeeeee;
		position: relative;
	}

	.list {
		padding: 19rpx 24rpx;
	}

	.image {
		position: absolute;
		left: 31.5rpx;
		bottom: 26.5rpx;
		width: 21rpx;
		height: 36rpx;
	}

	.text {
		color: #000000;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.list-item:not(:first-of-type) {
		margin-top: 20rpx;
	}
</style>
